<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" href="css/aui/account.css">
	</head>
	<body style="font-family: '黑体';">
		<div class="aui-content">
			<header class="aui-bar aui-bar-nav" style="border-bottom: 1px solid #CCCCCC;position: fixed;top:0;left:0;">
				<a class="aui-pull-left aui-btn" href="carts.html" style="color: #000000;">
					<span class="aui-iconfont aui-icon-left"></span>确认订单
				</a>
			</header>
		
			<div class="aui-list aui-media-list" style="margin-bottom: 0.5rem;margin-top:2.25rem;">
				<div class="aui-list-item">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media" style="width:20%;">
							<i class="aui-iconfont aui-icon-location" style="font-size:1rem;"></i>
						</div>
						<div class="aui-list-item-inner" style="width:80%;">
							<div class="aui-list-item-title">
										收货人：席娜娜　
										18322516110
									
							</div>
							<div class="aui-list-item-text">
								收货地址：天津市红桥区光荣道--宝能创业中心
								<i class="aui-iconfont aui-icon-right"></i>
							</div>
							<div class="aui-info" style="color: #c79705">
								(收货不便时，可选择免费代收货服务)
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="aui-list aui-media-list">
				<div class="aui-list-header" style="background-color: #FFFFFF;">
					淘宝旗舰店
				</div>
				<div class="aui-list-item" style="background-color: #f5f5f5;">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="img/b4.jpg" />
						</div>
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								香奈儿女士口红
							</div>
							<div class="aui-list-item-text">
								颜色：深红，型号：XL
							</div>
							<div class="aui-info">
								<div class="aui-list-item-title" style="color: red;">￥ 553.00</div>
								<div class="aui-list-item-right" style="font-size: 0.75rem;">x1</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="aui-margin-b-15">
				<ul class="aui-list aui-list-in">
					<li class="aui-list-item" aui-popup-for="bottom">
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title">配送方式</div>
							<div class="aui-list-item-right">
								快递 免邮
							</div>
						</div>
					</li>
					<!----弹窗---->
					<div class="aui-popup aui-popup-bottom" id="bottom" style="margin-bottom:-0.5rem;">
					    <div class="aui-popup-arrow"></div>
					    <div class="aui-popup-content">
					        <ul class="aui-list aui-list-noborder">
					            <li class="aui-list-item" style="height:10rem;margin-top: 1rem;">
					                	配送方式　　　　快递 免邮
					            </li>
					            <li class="aui-list-item close" style="color: #c79705;padding-left:45%;border-top:1px solid #CCCCCC;line-height: 2.2rem;;">
					            	关闭
					            </li>
					        </ul>
					    </div>
					</div>
					<li class="aui-list-item" aui-popup-for="bottom1">
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title">运费险</div>
							<div class="aui-list-item-right">
								卖家赠送，若确认收货前退货，可获保险赔付
							</div>
						</div>
					</li>
					<!----弹窗---->
					<div class="aui-popup aui-popup-bottom" id="bottom1" style="margin-bottom:-0.5rem;">
					    <div class="aui-popup-arrow"></div>
					    <div class="aui-popup-content">
					        <ul class="aui-list aui-list-noborder">
					            <li class="aui-list-item" style="height:10rem;margin-top: 1rem;">
					                	运费险<br>
				                		卖家赠送，若确认收货前退货，可获保险赔付！
					            </li>
					            <li class="aui-list-item close" style="color: #c79705;padding-left:45%;border-top:1px solid #CCCCCC;line-height: 2.2rem;;">
					            	确定
					            </li>
					        </ul>
					    </div>
					</div>
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label">
								买家留言：
							</div>
							<div class="aui-list-item-input">
								<input type="text" placeholder="选填：对本次交易的说明（建议填写已和卖..）" style="font-size:0.6rem;">
							</div>
						</div>
					</li>
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title"></div>
							<div class="aui-list-item-right">
								共1件商品　　小计：<span style="color:red;">￥533.00</span>
							</div>
						</div>
					</li>
				</ul>
			</div>	
			
			<div class="aui-margin-b-15" style="margin-bottom: 2.25rem;">
				<ul class="aui-list aui-select-list">
					<li class="aui-list-item">
						<div class="aui-list-item-label">可用103天猫积分抵￥1.08</div>
						<div class="aui-list-item-right">
							<input class="aui-checkbox" type="checkbox" name="checkbox" style="margin-top:1rem;margin-right:1rem;"/>
						</div>
					</li>
					<li class="aui-list-item">
						<div class="aui-list-item-label">使用天猫点券</div>
						<div class="aui-list-item-right">
							<input class="aui-checkbox" type="checkbox" name="checkbox" style="margin-top:1rem;margin-right:1rem;"/>
						</div>
					</li>
					<li class="aui-list-item">
						<div class="aui-list-item-label">匿名购买</div>
						<div class="aui-list-item-right">
							<input class="aui-checkbox" type="checkbox" name="checkbox" style="margin-top:1rem;margin-right:1rem;"/>
						</div>
					</li>
				</ul>
			</div>
			
			<footer class="aui-bar aui-bar-tab" id="footer" style="border-top:1px solid #CCCCCC;">
				<div class="aui-bar-tab-item" tapmode></div>
				<div class="aui-bar-tab-item" tapmode>合计：</div>
				<div class="aui-bar-tab-item" tapmode style="color:red;">￥533.00</div>
				<div class="aui-bar-tab-item" tapmode>
					<input class="aui-btn aui-btn-info aui-btn-block" type="submit" name="sub" value="提交订单">
				</div>
			</footer>
		</div>	
		<script type="text/javascript" src="js/aui/aui-popup.js" ></script>
		<script type="text/javascript" src="js/jquery-3.1.1/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
		    var popup = new auiPopup();
		    function showPopup(){
		        popup.show(document.getElementById("bottom"))
		    }
		    var popup = new auiPopup();
		    function showPopup(){
		        popup.show(document.getElementById("bottom1"))
		    }
		    
		    $('.close').click(function(){
		    	$("#bottom").hide();
		    	$("#bottom1").hide();
		    	$(".aui-mask").hide();
		    })
		</script>
	</body>
</html>